<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>连退平整机工艺参数优化模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col class="top-left" :span="12">
          <!-- <span class="warn">
            <img :src="imagePath(1)" style="position:absolute;top:10px;" />
          </span> -->
          <div class="svg svg-with-alarm" style="width: 100%; position: relative">
            <div class="alarm-info alarm-info-in-svg">
              <span class="alarm-icon">&#9888;</span>
              <div class="alarm-marquee">
                <span class="alarm-row-one-line marquee-text">
                  时间:{{ spmSetTime }} 卷号:{{ coilNo }} 轧制力:{{ rollingForce }} 工作辊弯辊力:{{ workRollBend }} 中间辊弯辊力:{{
                    interMediateRollBend
                  }}
                  随机系数:{{ followUpCoefficient }}
                </span>
              </div>
            </div>
            <svg-load :name="technologicalName" width="100%" style="padding-top: 60px"></svg-load>
          </div>
          <div class="coiler_remaining_length_b semitransp_box" style="position: absolute; left: 12.1vw; top: 7vh; padding: 0 0.5rem; display: flex">
            <p>卷号:</p>
            <p>{{ entId }}</p>
          </div>
          <div class="coiler_remaining_length_b semitransp_box" style="position: absolute; left: 12.1vw; top: 10vh; padding: 0 0.5rem; display: flex">
            <p>轧制力:</p>
            <p>{{ numberFormat1(zcoiler_remaining_length_b) }} KN</p>
          </div>
          <div class="coiler_remaining_length_b semitransp_box" style="position: absolute; left: 12.1vw; top: 13vh; padding: 0 0.5rem; display: flex">
            <p>窜辊:</p>
            <p>{{ numberFormat1(ccoiler_remaining_length_b) }}</p>
          </div>
          <div class="coiler_remaining_length_b semitransp_box" style="position: absolute; left: 12.1vw; top: 16vh; padding: 0 0.5rem; display: flex">
            <p>弯辊力:</p>
            <p>{{ numberFormat1(coiler_remaining_length_b) }} KN</p>
          </div>
          <div class="coiler_remaining_length_b semitransp_box" style="position: absolute; left: 12.1vw; top: 19vh; padding: 0 0.5rem; display: flex">
            <p>平整机速度:</p>
            <p>{{ numberFormat1(flat_machine_speed) }}</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div style="height: 280px; width: 650px; padding-top: 30px">
            <nercar-echarts
              :graphic="echartsListOptions[0].graphic"
              :title="echartsListOptions[0].title"
              :grid="echartsListOptions[0].grid"
              :x-axis="echartsListOptions[0].xAxis"
              :y-axis="echartsListOptions[0].yAxis"
              :tooltip="echartsListOptions[0].tooltip"
              :series="echartsListOptions[0].series"
            />
          </div>
        </el-col>
      </el-row>
      <el-row class="middle">
        <el-col :span="5">
          <div style="height: 210px; width: 320px; padding-left: 10px">
            <nercar-echarts
              :graphic="echartsListOptions[1].graphic"
              :title="echartsListOptions[1].title"
              :grid="echartsListOptions[1].grid"
              :x-axis="echartsListOptions[1].xAxis"
              :y-axis="echartsListOptions[1].yAxis"
              :tooltip="echartsListOptions[1].tooltip"
              :series="echartsListOptions[1].series"
              :legend="echartsListOptions[1].legend"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div style="height: 210px; width: 320px; padding-left: 10px">
            <nercar-echarts
              :graphic="echartsListOptions[4].graphic"
              :title="echartsListOptions[4].title"
              :grid="echartsListOptions[4].grid"
              :x-axis="echartsListOptions[4].xAxis"
              :y-axis="echartsListOptions[4].yAxis"
              :tooltip="echartsListOptions[4].tooltip"
              :series="echartsListOptions[4].series"
              :legend="echartsListOptions[4].legend"
            />
          </div>
        </el-col>

        <el-col :span="5">
          <div style="height: 210px; width: 320px; padding-left: 10px">
            <nercar-echarts
              :graphic="echartsListOptions[5].graphic"
              :title="echartsListOptions[5].title"
              :grid="echartsListOptions[5].grid"
              :x-axis="echartsListOptions[5].xAxis"
              :y-axis="echartsListOptions[5].yAxis"
              :tooltip="echartsListOptions[5].tooltip"
              :series="echartsListOptions[5].series"
              :legend="echartsListOptions[5].legend"
            />
          </div>
        </el-col>

        <el-col :span="5">
          <div style="height: 210px">
            <nercar-echarts
              :graphic="echartsListOptions[2].graphic"
              :title="echartsListOptions[2].title"
              :grid="echartsListOptions[2].grid"
              :x-axis="echartsListOptions[2].xAxis"
              :y-axis="echartsListOptions[2].yAxis"
              :tooltip="echartsListOptions[2].tooltip"
              :series="echartsListOptions[2].series"
              :legend="echartsListOptions[2].legend"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div style="height: 225px; width: 240px">
            <nercar-echarts
              :graphic="echartsListOptions[3].graphic"
              :title="echartsListOptions[3].title"
              :grid="echartsListOptions[3].grid"
              :x-axis="echartsListOptions[3].xAxis"
              :y-axis="echartsListOptions[3].yAxis"
              :tooltip="echartsListOptions[3].tooltip"
              :series="echartsListOptions[3].series"
              :legend="echartsListOptions[3].legend"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <new-coil-card title="当前卷和下一卷信息" style="font-size: 56px">
            <el-table
              :data="pidMesInfo"
              ref="alarmTableRef"
              :row-key="(row) => row.entid"
              style="width: 98%; border: 1px solid; height: 200px"
              :header-cell-style="{
                background: '#2f59af',
                color: '#fff',
                fontSize: '12px',
                borderTop: '1px solid #7D81B2',
                borderLeft: '1px solid #7D81B2',
                borderBottom: 'none',
                borderRight: 'none',
              }"
              :cell-style="{
                fontSize: '12px',
                borderTop: '1px solid #7D81B2',
                borderLeft: '1px solid #7D81B2',
                borderBottom: 'none',
                borderRight: 'none',
              }"
              max-height="106px"
              class="custom-table"
              empty-text
              :row-class-name="tableRowClassName"
            >
              <template #empty>
                <div class="custom-no-data">
                  <img src="/@/assets/images/nodata.png" alt="No Data Background" />
                </div>
              </template>
              <!-- <el-table-column prop="coilSort" label="钢卷顺序" ></el-table-column> -->
              <el-table-column prop="name" label="名称"></el-table-column>

              <el-table-column prop="entid" label="卷号"></el-table-column>
              <el-table-column prop="steelgrade" label="钢种"></el-table-column>
              <!-- <el-table-column prop="steelCode" label="钢种代码" width="90"></el-table-column> -->
              <el-table-column prop="inMatThick" label="厚度(mm)"></el-table-column>
              <el-table-column prop="inMatWidth" label="宽度(mm)"></el-table-column>
              <!-- <el-table-column prop="ys" label="屈服强度" width="105"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="合金化标记" width="90"></el-table-column>
              <el-table-column prop="STEEL_MARK" label="表面等级" width="90"></el-table-column> -->
              <el-table-column prop="rollingForceCal" label="轧制力AI设定值"></el-table-column>
              <el-table-column prop="lowSpeedWorkRollBend" label="工作弯辊力AI设定值">
                <template #default="scope">
                  {{ lowSpeedWorkRollBend }}
                </template>
              </el-table-column>
              <el-table-column prop="lowSpeedIntermeadiateRollBend" label="中间弯辊力AI设定值">
                <template #default="scope">
                  {{ lowSpeedIntermeadiateRollBend }}
                </template>
              </el-table-column>
              <el-table-column prop="imrShiftAdv" label="窜辊建议值"></el-table-column>
              <el-table-column prop="confidence" label="置信度"></el-table-column>
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import NercarEcharts from '/@/components/NercarEcharts/NercarEcharts.vue';
  import * as echarts from 'echarts';
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import { rollingSimulationStore } from '/@/store/rollingsimulation/index';
  import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
  import { levelingMachineApi } from '/@/api/levelingmachine/index';
  import dayjs from 'dayjs';
  import axios from 'axios';
  import { useUserStore } from '/@/store/modules/system/user';

  const entId = ref();
  const zcoiler_remaining_length_b = ref<number>(8.0);
  const ccoiler_remaining_length_b = ref<String>('DC51D');
  const coiler_remaining_length_b = ref<number>(25.0);
  const flat_machine_speed = ref<number>(25.0);
  const percentage_elongation = ref([]);
  const percentage_rollingforce = ref([]);
  const rollingForceSet = ref([]);
  const rollingLevelSet = ref([]);
  const wrbendForceSet = ref([]);
  const wrbendLevelSet = ref([]);
  const inbendLevelSet = ref([]);
  const inbendForceSet = ref([]);
  const wrbendForceCompensation = ref([]);
  const prewrbendForceCompensation = ref(0);
  const percentage_wrbendforce = ref([]);
  const percentage_inbendforce = ref([]);
  const plateType = ref([]);
  const length = 32;
  const xData = Array.from({ length }, (_, i) => i + 1);

  const inletLooper = ref<number>(0);
  const middleLooper = ref<number>(0);
  const exportLooper = ref<number>(0);
  const lowSpeedIntermeadiateRollBend = ref();
  const lowSpeedWorkRollBend = ref();
  let tr: any = null;
  let por: any = null;
  let ti: any = null;
  const coilNo = ref();
  const rollingForce = ref();
  const workRollBend = ref();
  const interMediateRollBend = ref();
  const followUpCoefficient = ref();
  const spmSetTime = ref();
  const alarmFullText = ref('');

  const stretch_goals = ref([]);

  const dataTimeX = ref<string[]>([]);

  const dateRange = ref<[Date, Date]>([dayjs().subtract(7, 'day').startOf('day').toDate(), dayjs().endOf('day').toDate()]);

  const data = ref([
    {
      menuName: 'levelingmachines',
      menuTitle: '连退平整机工艺参数主页',
      menuId: '1',
    },
    { menuName: 'test', menuTitle: 'test' },
    { menuName: 'levelingmachineplan', menuTitle: '连退平整机工艺计划' },
    { menuName: 'historicalsetvalue', menuTitle: '历史卷轧制力，弯辊力AI设定值' },
  ]);

  const options = [
    {
      value: 'Option1',
      label: '轧制力',
    },
    {
      value: 'Option2',
      label: '弯辊力',
    },
  ];

  const technologicalName = 'spm';
  const imagePath = (rowIndex: number) => {
    const normal = 'notice.png';
    if (rowIndex === 1) {
      return `/src/assets/images/${normal}`;
    }
  };

  const echartsListOptions = [
    {
      title: {
        show: true,
        text: '',
        textStyle: {
          color: '#fff',
        },
      },
      graphic: [
        {
          type: 'text',
          bottom: 40, // 距离底部的固定距离
          right: 5, // 距离底部的固定距离
          style: {
            text: '时间', // X轴名称
            fill: '#fff',
            fontSize: 10,
            align: 'center',
          },
        },
      ],
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let result = params[0].axisValue + '<br/>';
          params.forEach((param: any) => {
            result += param.marker + param.seriesName + ': ' + param.value.toFixed(3) + '<br/>';
          });
          return result;
        },
        axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' },
        },
      },
      grid: {
        left: '8%',
        right: '5%',
        bottom: '15%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0],
        }, //X轴内置滑动
        {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0],
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: dataTimeX.value,
          splitLine: { show: false },
        },
      ],
      yAxis: {
        type: 'value',
        name: 'AI弯辊力补偿值',
        nameTextStyle: {
          fontSize: '10px',
          color: '#fff', // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: '',
          data: wrbendForceCompensation.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
            shadowColor: 'rgba(93, 209, 250, 0.8)',
            shadowBlur: 10,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
      ],
    },
    {
      title: {
        left: 'center',
        show: true,
        text: '轧制力曲线',
        textStyle: {
          color: '#fff',
          fontSize: '12px',
        },
      },
      legend: {
        //left: 'left', // 图例在左侧显示
        data: ['二级设定', 'AI模型设定', '实际值'], // 图例数据项名称，应与series中的data项名称对应
        textStyle: {
          fontSize: '10px',
          color: '#fff',
        },
        top: '15px',
        left: '40px',
      },
      graphic: [
        {
          type: 'text',
          bottom: 45, // 距离底部的固定距离
          right: 0, // 距离底部的固定距离
          style: {
            text: '时间', // X轴名称
            fill: '#fff',
            fontSize: 10,
            align: 'center',
          },
        },
      ],
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let result = params[0].axisValue + '<br/>';
          params.forEach((param) => {
            result += param.marker + param.seriesName + ': ' + Number(param.value).toFixed(3) + '<br/>';
          });
          return result;
        },
        axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' },
        },
      },
      grid: {
        left: '5%',
        right: '7%',
        bottom: '15%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0],
        }, //X轴内置滑动
        {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0],
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: dataTimeX.value,
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'KN',
          nameTextStyle: {
            fontSize: '10px',
            color: '#fff', // 设置 y 轴名称的颜色为红色
          },
          scale: true, //纵坐标自适应
          splitLine: {
            show: false,
          },
          min: 0,
          max: 5000,
        },
      ],
      series: [
        {
          name: '二级设定',
          nameTextStyle: {
            fontSize: '18px',
            color: 'red', // 设置 y 轴名称的颜色为红色
          },
          data: rollingLevelSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: 'AI模型设定',
          data: rollingForceSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: '实际值',
          data: percentage_rollingforce.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
      ],
    },
    {
      title: {
        left: 'center',
        show: true,
        text: '板形柱状图',
        textStyle: {
          fontSize: '12px',
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['Profit'],
        textStyle: {
          fontSize: '10px',
          color: '#fff',
        },
      },
      grid: [
        {
          top: '5%',
          containLabel: false,
        },
      ],
      xAxis: [
        {
          data: xData,
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          min: -10,
          max: 10,

          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
      ],
      series: [
        {
          name: '板形',
          type: 'bar',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: plateType.value,
        },
      ],
    },
    {
      legend: {
        data: ['目标值', '实际值'],
        textStyle: {
          fontSize: '10px',
          color: '#fff', // 设置图例文字颜色
        },
        top: '15px',
      },
      title: {
        left: 'center',
        show: true,
        text: '',
        textStyle: {
          fontSize: '12px',
          color: '#fff',
        },
      },
      graphic: [
        {
          type: 'text',
          bottom: 65, // 距离底部的固定距离
          right: 14, // 距离底部的固定距离
          style: {
            text: '时间', // X轴名称
            fill: '#fff',
            fontSize: 10,
            align: 'center',
          },
        },
      ],
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' },
        },
      },
      grid: {
        left: '7%',
        right: '11%',
        bottom: '24%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0],
        }, //X轴内置滑动
        {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0],
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: dataTimeX.value,
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '延伸率(%)',
          nameTextStyle: {
            fontSize: '10px',
            color: '#fff', // 设置 y 轴名称的颜色为红色
          },
          scale: true, //纵坐标自适应
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '目标值',
          data: stretch_goals.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },

          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: '实际值',
          data: percentage_elongation.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
      ],
    },
    {
      title: {
        left: 'center',
        show: true,
        text: '工作弯辊力曲线',
        textStyle: {
          color: '#fff',
          fontSize: '12px',
        },
      },
      legend: {
        //left: 'left', // 图例在左侧显示
        data: ['二级设定', 'AI模型设定', '实际值'], // 图例数据项名称，应与series中的data项名称对应
        textStyle: {
          fontSize: '10px',
          color: '#fff',
        },
        top: '15px',
        left: '40px',
      },
      graphic: [
        {
          type: 'text',
          bottom: 45, // 距离底部的固定距离
          right: 1, // 距离底部的固定距离
          style: {
            text: '时间', // X轴名称
            fill: '#fff',
            fontSize: 10,
            align: 'center',
          },
        },
      ],
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let result = params[0].axisValue + '<br/>';
          params.forEach((param) => {
            result += param.marker + param.seriesName + ': ' + Number(param.value).toFixed(3) + '<br/>';
          });
          return result;
        },
        axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' },
        },
      },
      grid: {
        left: '5%',
        right: '7%',
        bottom: '15%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0],
        }, //X轴内置滑动
        {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0],
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: dataTimeX.value,
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'KN',
          nameTextStyle: {
            fontSize: '10px',
            color: '#fff', // 设置 y 轴名称的颜色为红色
          },
          scale: true, //纵坐标自适应
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '二级设定',
          nameTextStyle: {
            fontSize: '18px',
            color: 'red', // 设置 y 轴名称的颜色为红色
          },
          data: wrbendLevelSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: 'AI模型设定',
          data: wrbendForceSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: '实际值',
          data: percentage_wrbendforce.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
      ],
    },
    {
      title: {
        left: 'center',
        show: true,
        text: '中间辊弯辊力曲线',
        textStyle: {
          color: '#fff',
          fontSize: '12px',
        },
      },
      legend: {
        //left: 'left', // 图例在左侧显示
        data: ['二级设定', 'AI模型设定', '实际值'], // 图例数据项名称，应与series中的data项名称对应
        textStyle: {
          fontSize: '10px',
          color: '#fff',
        },
        top: '15px',
        left: '40px',
      },
      graphic: [
        {
          type: 'text',
          bottom: 45, // 距离底部的固定距离
          right: 1, // 距离底部的固定距离
          style: {
            text: '时间', // X轴名称
            fill: '#fff',
            fontSize: 10,
            align: 'center',
          },
        },
      ],
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
          saveAsImage: {},
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let result = params[0].axisValue + '<br/>';
          params.forEach((param) => {
            result += param.marker + param.seriesName + ': ' + Number(param.value).toFixed(3) + '<br/>';
          });
          return result;
        },
        axisPointer: {
          type: 'cross',
          label: { color: '#fff' },
          crossStyle: { color: '#6d7882' },
        },
      },
      grid: {
        left: '5%',
        right: '7%',
        bottom: '15%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider', //滑动条
          show: true, //开启
          xAxisIndex: [0],
        }, //X轴内置滑动
        {
          type: 'inside', //内置滑动，随鼠标滚轮展示
          xAxisIndex: [0],
        },
      ],
      xAxis: [
        {
          type: 'category',
          data: dataTimeX.value,
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'KN',
          nameTextStyle: {
            fontSize: '10px',
            color: '#fff', // 设置 y 轴名称的颜色为红色
          },
          scale: true, //纵坐标自适应
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '二级设定',
          nameTextStyle: {
            fontSize: '18px',
            color: 'red', // 设置 y 轴名称的颜色为红色
          },
          data: inbendLevelSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: 'AI模型设定',
          data: inbendForceSet.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
        {
          name: '实际值',
          data: percentage_inbendforce.value,
          type: 'line',
          smooth: false,
          lineStyle: {
            width: 1,
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.1)' },
            ]),
          },
          symbolSize: 1,
          symbol: 'circle',
        },
      ],
    },
  ];

  const tableRowClassName = ({ row, rowIndex }) => {
    //rowIndex从0开始计算
    if (rowIndex % 2 != 0) {
      return 'warning-row';
    }
    return '';
  };

  const pidMesInfo = ref([{}, {}]);

  const numberFormat1 = (number: any) => {
    return number == undefined ? '0' : Number(parseFloat(number).toFixed(0));
  };
  let interval: any = null;
  let interval1: any = null;

  onBeforeMount(() => {
    useUserStore().setTagNav(data.value);
  }),
    onMounted(() => {
      // 默认时间范围为前7天到今天
      fetchData();
    });
  const fetchData = () => {
    const [start, end] = dateRange.value;
    const dbegin = dayjs(start).format('YYYY-MM-DD 00:00:00');
    const dend = dayjs(end).format('YYYY-MM-DD 23:59:59');
    interval = setInterval(() => {
      getZoneTrk();
      getAIModeTableData();
      getElongationData();
      getRecForceLine();
      updatePlateType();
      getEarlyWarning();
      dataTimeX.value.push(dayjs().format('HH:mm:ss'));
      getSteelGradeData();
      searchButtonClick();
    }, 2000);
    interval1 = setInterval(() => {
      getSteelGradeData();
    }, 500);
  };

  const getZoneTrk = async () => {
    let param = {
      name: 'CAL1630_zonetrk',
    };

    rollingSimulationApi.rest(param).then((res) => {
      let zones = res.data.zoneno;
      inletLooper.value = res.data['loop'][0];
      middleLooper.value = res.data['loop'][1];
      exportLooper.value = res.data['loop'][2];
      let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
      let trpathKey = trKey + '_path';
      let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
      let porpathKey = porKey + '_path';
      var arr = Object.keys(zones);
      /**开卷机和卷取机 */
      if (tr === null || tr !== res.data.tr) {
        tr = res.data.tr;
        refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
        refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
        initialSVG(technologicalName, 'tr', res.data.tr);
      }
      if (por === null || por !== res.data.por) {
        por = res.data.por;
        if (res.data.por === 0) {
          initialSVG(technologicalName, 'por', '1');
          initialSVG(technologicalName, 'por', '2');
        }
      }
      if (ti === null || ti !== zones[0].ti) {
        ti = zones[0].ti;
        refreshSVG(zones[0].ti % 10, porpathKey);
        refreshGraphical(zones[0].ti % 10, porKey);
        initialSVG(technologicalName, 'por', res.data.por);
      }
      for (let i in zones) {
        let pathkey = `${technologicalName}-ZONE${i}`;
        refreshSVG(zones[i].ti % 10, pathkey);
      }
    });
  };

  async function searchButtonClick() {
    const param = {
      action: 'get_tags',
      operator: 'abc ',
      terminal: 'FM_01',
      body: [
        {
          tagName: 'CAL1_ROLL.Fspare1',
          timestamp: 0,
        },
        {
          tagName: 'CAL1_ROLL.Fspare2',
          timestamp: 0,
        },
        {
          tagName: 'CAL1_ROLL.Fspare5',
          timestamp: 0,
        },
      ],
    };

    levelingMachineApi.LHMI(param).then((res) => {
      const obj = res.data;
      rollingForceSet.value.push(obj.results[0].value);
      wrbendForceSet.value.push(obj.results[1].value);
      inbendForceSet.value.push(obj.results[2].value);

      console.log('测试1' + rollingForceSet.value);
    });
  }
  async function getRecForceLine() {
    let param = {
      name: 'CAL1630_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      percentage_rollingforce.value.push(obj['G426_411NI']);
      rollingLevelSet.value.push(obj['G401_513NI']);
      percentage_wrbendforce.value.push(obj['G426_434NI']);
      percentage_inbendforce.value.push(obj['G401_554NI']);
      wrbendLevelSet.value.push(obj['G401_326DS_VAL']);
      inbendLevelSet.value.push(obj['G401_514NI']);
      let rollingforce = obj['G426_411NI'] - prewrbendForceCompensation.value;
      axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_ZoneCoilId').then((res) => {
        entId.value = res.data['zoneno']['83']['entId'];

        let param2 = {
          entid: entId.value,
        };
        levelingMachineApi.findProcessValue(param2).then((res) => {
          console.log(res.data);
          //rollingForceSet.value.push(res.data.data.aiRollForce);
          //wrbendForceSet.value.push(res.data.data.aiWorkingRoll);
          //inbendForceSet.value.push(res.data.data.lowSpeedIntermediateRollBend);
          wrbendForceCompensation.value.push(rollingforce * res.data.data.workRollBendComp);
        });
      });

      prewrbendForceCompensation.value = obj['G426_411NI'];
    });
  }

  //延伸率
  async function getElongationData() {
    // const param = {
    //   action: "get_tags",
    //   operator: "abc ",
    //   terminal: "FM_01",
    //   body: [
    //     {
    //       tagName: "spm_elongation_set",
    //       timestamp: 0
    //     },
    //     {
    //       tagName: "spm_elongation_act",
    //       timestamp: 0
    //     }
    //   ]
    // };

    let param = {
      name: 'CAL1630_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      stretch_goals.value.push(Number(parseFloat(obj['G401_583NI']).toFixed(2)).toFixed(2));
      percentage_elongation.value.push(Number(parseFloat(obj['spm_elongation_act']).toFixed(2)).toFixed(2));
    });
  }
  async function getAIModeTableData() {
    let param = {
      name: 'CAL1630_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      zcoiler_remaining_length_b.value = obj['G426_411NI'];
      ccoiler_remaining_length_b.value = obj['G426_421NI'];
      coiler_remaining_length_b.value = obj['G426_434NI'];
      flat_machine_speed.value = obj['G1_1801NI'];
    });
  }

  async function getPlateType() {
    let param = {
      name: 'CAL1630_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      plateType.value.push(obj['G427_804BR']);
      plateType.value.push(obj['G427_805BR']);
      plateType.value.push(obj['G427_806BR']);
      plateType.value.push(obj['G427_807BR']);
      plateType.value.push(obj['G427_808BR']);
      plateType.value.push(obj['G427_809BR']);
      plateType.value.push(obj['G427_810BR']);
      plateType.value.push(obj['G427_811BR']);
      plateType.value.push(obj['G427_812BR']);
      plateType.value.push(obj['G427_813BR']);
      plateType.value.push(obj['G427_814BR']);
      plateType.value.push(obj['G427_815BR']);
      plateType.value.push(obj['G427_816BR']);
      plateType.value.push(obj['G427_817BR']);
      plateType.value.push(obj['G427_818BR']);
      plateType.value.push(obj['G427_819BR']);
      plateType.value.push(obj['G427_820BR']);
      plateType.value.push(obj['G427_821BR']);
      plateType.value.push(obj['G427_822BR']);
      plateType.value.push(obj['G427_823BR']);
      plateType.value.push(obj['G427_824BR']);
      plateType.value.push(obj['G427_825BR']);
      plateType.value.push(obj['G427_826BR']);
      plateType.value.push(obj['G427_827BR']);
      plateType.value.push(obj['G427_828BR']);
      plateType.value.push(obj['G427_829BR']);
      plateType.value.push(obj['G427_830BR']);
      plateType.value.push(obj['G427_831BR']);
      plateType.value.push(obj['G427_832BR']);
      plateType.value.push(obj['G427_833BR']);
      plateType.value.push(obj['G427_834BR']);
      plateType.value.push(obj['G427_835BR']);
    });
  }

  function getEarlyWarning() {
    let param = {};
    levelingMachineApi.findEarlyWarning(param).then((ress) => {
      console.log('测试' + ress);
      coilNo.value = ress.data.data.coilNo;
      rollingForce.value = ress.data.data.rollingForce;
      workRollBend.value = ress.data.data.workRollBend;
      interMediateRollBend.value = ress.data.data.interMediateRollBend;
      followUpCoefficient.value = ress.data.data.followUpCoefficient;
      spmSetTime.value = ress.data.data.spmSetTime;
      alarmFullText.value =
        '时间:' +
        spmSetTime.value +
        ' 卷号:' +
        coilNo.value +
        ' 轧制力:' +
        rollingForce.value +
        ' 工作辊弯辊力:' +
        workRollBend.value +
        ' 中间辊弯辊力:' +
        interMediateRollBend.value +
        ' 随机系数:' +
        followUpCoefficient.value;
    });
  }

  async function updatePlateType() {
    let param = {
      name: 'CAL1630_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      plateType.value.splice(0, 1, obj['G427_804BR']);
      plateType.value.splice(1, 1, obj['G427_805BR']);
      plateType.value.splice(2, 1, obj['G427_806BR']);
      plateType.value.splice(3, 1, obj['G427_807BR']);
      plateType.value.splice(4, 1, obj['G427_808BR']);
      plateType.value.splice(5, 1, obj['G427_809BR']);
      plateType.value.splice(6, 1, obj['G427_810BR']);
      plateType.value.splice(7, 1, obj['G427_811BR']);
      plateType.value.splice(8, 1, obj['G427_812BR']);
      plateType.value.splice(9, 1, obj['G427_813BR']);
      plateType.value.splice(10, 1, obj['G427_814BR']);
      plateType.value.splice(11, 1, obj['G427_815BR']);
      plateType.value.splice(12, 1, obj['G427_816BR']);
      plateType.value.splice(13, 1, obj['G427_817BR']);
      plateType.value.splice(14, 1, obj['G427_818BR']);
      plateType.value.splice(15, 1, obj['G427_819BR']);
      plateType.value.splice(16, 1, obj['G427_820BR']);
      plateType.value.splice(17, 1, obj['G427_821BR']);
      plateType.value.splice(18, 1, obj['G427_822BR']);
      plateType.value.splice(19, 1, obj['G427_823BR']);
      plateType.value.splice(20, 1, obj['G427_824BR']);
      plateType.value.splice(21, 1, obj['G427_825BR']);
      plateType.value.splice(22, 1, obj['G427_826BR']);
      plateType.value.splice(23, 1, obj['G427_827BR']);
      plateType.value.splice(24, 1, obj['G427_828BR']);
      plateType.value.splice(25, 1, obj['G427_829BR']);
      plateType.value.splice(26, 1, obj['G427_830BR']);
      plateType.value.splice(27, 1, obj['G427_831BR']);
      plateType.value.splice(28, 1, obj['G427_832BR']);
      plateType.value.splice(29, 1, obj['G427_833BR']);
      plateType.value.splice(30, 1, obj['G427_834BR']);
      plateType.value.splice(31, 1, obj['G427_835BR']);
    });
  }

  async function getSteelGradeData() {
    // 不再清空数组
    axios.get('http://10.171.7.100:8090/restapi?name=CAL1630_ZoneCoilId').then((res) => {
      entId.value = res.data['zoneno']['83']['entId'];

      let param2 = {
        entid: entId.value,
      };
      levelingMachineApi.findProcessValue(param2).then((ress) => {
        if (ress.data.data.ifSearchSame == 0 && ress.data.data.ifSearch == 0) {
          let param = {
            name: 'CAL1630_RealData',
          };
          rollingSimulationApi.rest(param).then((res) => {
            lowSpeedIntermeadiateRollBend.value = parseFloat(res.data['G401_514NI']).toFixed(0);
            lowSpeedWorkRollBend.value = parseFloat(res.data['G401_326DS_VAL']).toFixed(0);
          });
        } else {
          lowSpeedIntermeadiateRollBend.value = parseFloat(ress.data.data.lowSpeedIntermediateRollBend).toFixed(0);
          lowSpeedWorkRollBend.value = parseFloat(ress.data.data.aiWorkingRoll).toFixed(0);
        }
        ress.data.data.rollingForceCal = parseFloat(ress.data.data.aiRollForce).toFixed(0);
        ress.data.data.name = '当前卷';
        pidMesInfo.value[0] = { ...ress.data.data };
      });
      let next;
      for (let i = 82; i > 0; i--) {
        if (res.data['zoneno'][i]['entId'] != res.data['zoneno']['83']['entId']) {
          next = res.data['zoneno'][i]['entId'];
          break;
        }
      }
      let param3 = {
        entid: next,
      };
      levelingMachineApi.findProcessValue(param3).then((ress) => {
        if (ress.data.data.ifSearchSame == 0 && ress.data.data.ifSearch == 0) {
          let param = {
            name: 'CAL1630_RealData',
          };
          rollingSimulationApi.rest(param).then((res) => {
            lowSpeedIntermeadiateRollBend.value = parseFloat(res.data['G401_514NI']).toFixed(0);
            lowSpeedWorkRollBend.value = parseFloat(res.data['G401_326DS_VAL']).toFixed(0);
          });
        } else {
          lowSpeedIntermeadiateRollBend.value = parseFloat(ress.data.data.lowSpeedIntermediateRollBend).toFixed(0);
          lowSpeedWorkRollBend.value = parseFloat(ress.data.data.aiWorkingRoll).toFixed(0);
        }
        ress.data.data.rollingForceCal = parseFloat(ress.data.data.aiRollForce).toFixed(0);
        ress.data.data.name = '下一卷';
        pidMesInfo.value[1] = { ...ress.data.data };
      });
    });
  }

  watch(
    () => {
      return dataTimeX.value.length;
    },
    () => {
      if (dataTimeX.value.length > 60) {
        dataTimeX.value.shift();
        stretch_goals.value.shift();
        percentage_elongation.value.shift();
        percentage_rollingforce.value.shift();
        rollingLevelSet.value.shift();
        rollingForceSet.value.shift();
        percentage_wrbendforce.value.shift();
        percentage_inbendforce.value.shift();
        wrbendLevelSet.value.shift();
        inbendLevelSet.value.shift();
        wrbendForceSet.value.shift();
        inbendForceSet.value.shift();
        wrbendForceCompensation.value.shift();
      }
    }
  );

  onUnmounted(() => {
    dataTimeX.value = [];
    stretch_goals.value = [];
    percentage_elongation.value = [];
    percentage_rollingforce.value = [];
    rollingLevelSet.value = [];
    rollingForceSet.value = [];
    wrbendForceCompensation.value = [];
    pidMesInfo.value = [];
    clearInterval(interval);
  });

  // rollingSimulationApi.HMI(param).then(res => {
  //   console.log(res)
  //   res.data.results.forEach((element: any) => {
  //     if (element.tagName == "spm_elongation_set")
  //       stretch_goals.value = element.value;
  //     if (element.tagName == "spm_elongation_act")
  //       percentage_elongation.value = element.value;

  //   });
  // });
</script>
<style scoped lang="less">
  .home {
    width: 100vw;
    background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

    .home-main {
      height: 100%;

      .top {
        width: 100%;
      }

      .middle {
        width: 100%;
        height: 212px;

        .svg {
          width: 100%;
          height: 100%;

          svg {
            margin-top: 4vh;
            width: 100%;
            height: 100%;
          }
        }
      }

      .footer {
        width: 100%;
        height: 240px;
      }
    }
  }
  .warn {
    color: #fff;
    height: 0;
    padding-left: 3vw;
  }
  ::v-deep .el-table,
  .el-table__expanded-cell {
    // margin-left: 5px !important;
    background-color: transparent !important;
  }
  ::v-deep .el-table tr {
    background-color: transparent !important;
  }

  ::v-deep .el-table tbody {
    background-color: transparent !important;
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td,
  ::v-deep .el-table .cell {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    //border: none !important;
  }

  ::v-deep .el-table--enable-row-transition .el-table__body td {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  :deep(.el-table tr) {
    background-color: #162556;
  }
  :deep(.el-table__inner-wrapper::before) {
    background-color: #173d91;
  }

  .custom-no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure the container takes full height */
  }

  ::v-deep .el-table .warning-row {
    background: #223671 !important;
  }

  ::v-deep .el-select .el-select__wrapper {
    position: absolute;
    min-height: 10px;
    height: 25px !important; /* 自定义高度 */
    background-color: #173d91;
    color: #fff;
    font-size: 12px;
    top: 55px;
    left: 45px;
    width: 80px;
    z-index: 999;
  }

  .coiler_remaining_length_b {
    position: absolute;
    left: 12vw;
    top: 12vh;
    text-align: center;
    width: 8vw;
    font-size: 12px;
  }

  .semitransp_box {
    border-radius: 4px;
    background: #063e90;
    width: fit-content;
    font-weight: 600;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 10px;
  }
  .alarm-info {
    display: flex;
    align-items: flex-start;
    background: #fff2f0;
    border: 1px solid #ff4d4f;
    border-radius: 6px;
    margin-left: 65px;
    color: #222;
    min-width: 350px;
    max-width: 600px;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.08);
  }
  .alarm-icon {
    font-size: 28px;
    color: #ff4d4f;
    margin-right: 12px;
    margin-top: 2px;
  }
  .alarm-content {
    font-size: 14px;
    line-height: 1.8;
  }
  .alarm-label {
    color: #ff4d4f;
    font-weight: bold;
    margin-right: 4px;
  }
  .alarm-value {
    color: #222;
    margin-right: 16px;
  }
  .alarm-value.ellipsis {
    display: inline-block;
    max-width: 90px;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .alarm-row-one-line.ellipsis {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 8px;
  }
  .alarm-info-in-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    margin-left: 65px;
    background: rgba(255, 242, 240, 0.95);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.08);
  }
  .svg-with-alarm {
    position: relative;
  }
  :deep(.el-tooltip__popper) {
    color: #222 !important;
    font-size: 14px;
  }
  .alarm-marquee {
    overflow: hidden;
    width: 100%;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 18s linear infinite;
    font-size: 15px;
    color: #222;
    font-weight: 500;
    padding-left: 10px;
  }
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
